<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<script type="text/javascript">
	var iconData = [ {
		value : '',
		text : 'Default'
	}, {
		value : 'icon-add',
		text : 'icon-add'
	}, {
		value : 'icon-edit',
		text : 'icon-edit'
	}, {
		value : 'icon-remove',
		text : 'icon-remove'
	}, {
		value : 'icon-save',
		text : 'icon-save'
	}, {
		value : 'icon-cut',
		text : 'icon-cut'
	}, {
		value : 'icon-ok',
		text : 'icon-ok'
	}, {
		value : 'icon-no',
		text : 'icon-no'
	}, {
		value : 'icon-cancel',
		text : 'icon-cancel'
	}, {
		value : 'icon-reload',
		text : 'icon-reload'
	}, {
		value : 'icon-search',
		text : 'icon-search'
	}, {
		value : 'icon-print',
		text : 'icon-print'
	}, {
		value : 'icon-help',
		text : 'icon-help'
	}, {
		value : 'icon-undo',
		text : 'icon-undo'
	}, {
		value : 'icon-redo',
		text : 'icon-redo'
	}, {
		value : 'icon-back',
		text : 'icon-back'
	}, {
		value : 'icon-sum',
		text : 'icon-sum'
	}, {
		value : 'icon-tip',
		text : 'icon-tip'
	} ];
	//Auto execution function
	$(function() {
		$('#sys_menu_treegrid').treegrid({
			url : '${pageContext.request.contextPath}/menuManagement/query.action',
			idField : 'id',
			treeField : 'text',
			parentField : 'pid',
			fit : true,
			fitColumns : true,
			border : false,
			frozenColumns : [ [ {
				title : 'ID',
				field : 'id',
				width : 150,
				hidden : true
			}, {
				title : 'Menu Name',
				field : 'text',
				width : 150
			} ] ],
			columns : [ [ {
				title : 'Menu Icon',
				field : 'iconCls',
				width : 60,
				formatter : function(value) {
					if (!value) {
						return '';
					} else {
						return formatString('<span class="{0}" style="display:inline-block;vertical-align:middle;width:16px;height:16px;"></span>', value);
					}
				}
			}, {
				title : 'Menu URL',
				field : 'url',
				width : 200
			}, {
				title : 'Sequence',
				field : 'display_seq',
				width : 50
			}, {
				title : 'Parent ID',
				field : 'pid',
				width : 150,
				hidden : true
			}, {
				title : 'Parent Menu Name',
				field : 'ptext',
				width : 80
			}, {
				title : 'Action',
				field : 'action',
				width : 50,
				formatter : function(value, row, index) {
					return formatString('<img onclick="sys_menu_editFun(\'{0}\');" src="{1}"/>&nbsp;<img onclick="sys_menu_deleteFun(\'{2}\');" src="{3}"/>', row.id, '${pageContext.request.contextPath}/webresource/image/widget/pencil.png', row.id, '${pageContext.request.contextPath}/webresource/image/widget/cancel.png');
				}
			} ] ],
			toolbar : [ {
				text : 'Add',
				iconCls : 'icon-add',
				handler : function() {
					sys_menu_appendFun();
				}
			}, '-', {
				text : 'Expand',
				iconCls : 'icon-redo',
				handler : function() {
					var node = $('#sys_menu_treegrid').treegrid('getSelected');
					if (node) {
						$('#sys_menu_treegrid').treegrid('expandAll', node.cid);
					} else {
						$('#sys_menu_treegrid').treegrid('expandAll');
					}
				}
			}, '-', {
				text : 'Collapse',
				iconCls : 'icon-undo',
				handler : function() {
					var node = $('#sys_menu_treegrid').treegrid('getSelected');
					if (node) {
						$('#sys_menu_treegrid').treegrid('collapseAll', node.cid);
					} else {
						$('#sys_menu_treegrid').treegrid('collapseAll');
					}
				}
			}, '-', {
				text : 'Refresh',
				iconCls : 'icon-reload',
				handler : function() {
					$('#sys_menu_treegrid').treegrid('reload');
				}
			} ],
			onContextMenu : function(e, row) {
				e.preventDefault();
				$(this).treegrid('unselectAll');
				$(this).treegrid('select', row.id);
				$('#sys_menu_rightclick_menu').menu('show', {
					left : e.pageX,
					top : e.pageY
				});
			}
		});
	});

	function sys_menu_appendFun() {
		$('<div/>').dialog({
			href : '${pageContext.request.contextPath}/menu/add.jsp',
			width : 500,
			height : 200,
			modal : true,
			title : 'Add Menu',
			buttons : [ {
				text : 'Add',
				iconCls : 'icon-add',
				handler : function() {
					var d = $(this).closest('.window-body');
					$('#sys_menu_addForm').form('submit', {
						url : '${pageContext.request.contextPath}/menuManagement/add.action',
						success : function(result) {
							try {
								var r = $.parseJSON(result);
								if (r.success) {
									$('#sys_menu_treegrid').treegrid('append', {
										parent : r.obj.pid,
										data : [ r.obj ]
									});

									d.dialog('destroy');

									$('#layout_west_tree').tree('reload');
								}
								$.messager.show({
									title : 'Prompt',
									msg : r.msg
								});
							} catch (e) {
								$.messager.alert('Prompt', result);
							}
						}
					});
				}
			} ],
			onClose : function() {
				$(this).dialog('destroy');
			}
		});
	}
	function sys_menu_editFun(id) {
		if (id != undefined) {
			$('#sys_menu_treegrid').treegrid('select', id);
		}
		var node = $('#sys_menu_treegrid').treegrid('getSelected');
		$('<div/>').dialog({
			href : '${pageContext.request.contextPath}/menu/edit.jsp',
			width : 500,
			height : 200,
			modal : true,
			title : 'Menu Edit',
			buttons : [ {
				text : 'Edit',
				iconCls : 'icon-edit',
				handler : function() {
					var d = $(this).closest('.window-body');
					$('#sys_menu_editForm').form('submit', {
						url : '${pageContext.request.contextPath}/menuManagement/edit.action',
						success : function(result) {
							try {
								var r = $.parseJSON(result);
								if (r.success) {
									$('#sys_menu_treegrid').treegrid('reload');
									d.dialog('destroy');

									$('#layout_west_tree').tree('reload');
								}
								$.messager.show({
									title : 'Prompt',
									msg : r.msg
								});
							} catch (e) {
								$.messager.alert('Prompt', result);
							}
						}
					});
				}
			} ],
			onClose : function() {
				$(this).dialog('destroy');
			},
			onLoad : function() {
				$('#sys_menu_editForm').form('load', node);
			}
		});
	}
	function sys_menu_deleteFun(id) {
		if (id != undefined) {
			$('#sys_menu_treegrid').treegrid('select', id);
		}
		var node = $('#sys_menu_treegrid').treegrid('getSelected');
		if (node) {
			$.messager.confirm('Confirm', 'Are you sure to delete [' + node.text + ']?', function(b) {
				if (b) {
					$.ajax({
						url : '${pageContext.request.contextPath}/menuManagement/delete.action',
						data : {
							id : node.id
						},
						cache : false,
						dataType : 'JSON',
						success : function(r) {
							if (r.success) {
								$('#sys_menu_treegrid').treegrid('remove', r.obj);

								$('#layout_west_tree').tree('reload');
							}
							$.messager.show({
								msg : r.msg,
								title : 'Prompt'
							});
						}
					});
				}
			});
		}
	}
</script>
<table id="sys_menu_treegrid"></table>
<!-- This is right click menu -->
<div id="sys_menu_rightclick_menu" class="easyui-menu" style="width:120px;display: none;">
	<div onclick="sys_menu_appendFun();" data-options="iconCls:'icon-add'">Add</div>
	<div onclick="sys_menu_deleteFun();" data-options="iconCls:'icon-remove'">Delete</div>
	<div onclick="sys_menu_editFun();" data-options="iconCls:'icon-edit'">Edit</div>
</div>